<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span class="card-title animate__animated animate__bounceInLeft">
                    你好 <span style="color: rgb(59, 131, 185)">{{ user.name }}</span> ，欢迎来到{{ title }}！
                </span>
                <span class="card-time animate__animated animate__bounceInRight">{{ nowTime }}</span>
            </div>
        </template>
        <el-descriptions :column="4" border class="animate__animated animate__bounceIn">
            <el-descriptions-item>
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="User" size="18" value="用户名" />
                    </div>
                </template>
                {{ user.username }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="Cellphone" size="18" value="手机号" />
                    </div>
                </template>
                {{ user.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="DeleteLocation" size="18" value="上次登录IP" />
                    </div>
                </template>
                {{ user.prevLoginIp }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="Timer" size="18" value="上次登录时间" />
                    </div>
                </template>
                {{ user.prevLoginTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="user?.roleNameList && user?.roleNameList.length > 0">
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="PieChart" size="18" value="角色" />
                    </div>
                </template>
                <lemon-tag :value="user?.roleNameList" />
            </el-descriptions-item>
            <el-descriptions-item v-if="user?.classNameList && user?.classNameList.length > 0">
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="Document" size="18" value="班级" />
                    </div>
                </template>
                <lemon-tag :value="user?.classNameList" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="label-icon">
                        <lemon-icon icon="Promotion" size="18" value="地址" />
                    </div>
                </template>
                {{ user.address }}
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { dayjs } from "element-plus";
import { getNameById } from "@/utils/city";

// 引入全局方法
const { http, emitter } = inject<any>("method");

//当前用户
const user = ref<any>({});

//读取全局配置文件中的标题
const title = ref(import.meta.env.VITE_APP_TITLE);

//时间
const week: Array<string> = ["日", "一", "二", "三", "四", "五", "六"];
const nowTime = ref<string>(dayjs().format("YYYY-MM-DD HH:mm:ss") + " 星期" + week[dayjs().day()]);
const intervalId = ref<number | null>(null);

//初始化时间
const initTime = () => (intervalId.value = setInterval(() => (nowTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss") + " 星期" + week[dayjs().day()]), 1000));

//获取用户信息
const getCurrentUser = async () => {
    const data = await http.get("/home/getCurrentUser");
    if (data?.provinceId && data?.cityId && data?.countyId) {
        data.address = getNameById(data.provinceId) + " - " + getNameById(data.cityId) + " - " + getNameById(data.countyId) + " - " + data?.address;
    }
    user.value = data;
};

//获取用户信息
emitter.on("home-header-get-user", () => isMounted.value && getCurrentUser());

//判断是否挂载
const isMounted = ref<boolean>(false);

//初始化
onMounted(() => {
    isMounted.value = true;
    initTime();
    getCurrentUser();
});

//卸载前执行
onBeforeUnmount(() => {
    isMounted.value = false;
    clearInterval(intervalId.value!);
});
</script>

<style scoped lang="less">
@bgcolor: rgba(0, 0, 0, 0);

.el-card {
    background-color: @bgcolor;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-title {
            font-size: 1.5rem;
            font-weight: bolder;
        }

        .card-time {
            font-size: 1.1rem;
            font-weight: bolder;
        }
    }

    :deep(.el-descriptions) {
        background-color: @bgcolor;

        .el-descriptions__body {
            background-color: @bgcolor;
        }

        .el-descriptions__cell {
            background-color: @bgcolor;
        }
    }
}
.label-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
</style>
